/* The sidebar as a table of contents: five sections, one anatomy. Each card opens with a header row - gradient swatch + mono tag on the left, one pill action on the right, hairline below - so every block declares what it is and where it goes. The swatch colors match the destination pages' art. */ function SideSection({ art, glow, tag, action, onAction, pad = '18px 20px 18px', children }) { const { Button } = window.SevcikMarketingDesignSystem_3203fa; return (
{action && }
{children}
); } /* All logos in one draggable, slowly drifting loop - pauses on hover/drag. */ function LogoLoop({ logos }) { const ref = React.useRef(null); const st = React.useRef({ x: 0, drag: null, paused: false }); React.useEffect(() => { const el = ref.current; if (!el) return; let raf; const step = () => { const s = st.current; if (!s.paused && !s.drag) s.x -= 0.08; const half = (el.scrollWidth / 2) || 1; if (s.x <= -half) s.x += half; if (s.x > 0) s.x -= half; el.style.transform = `translateX(${s.x}px)`; raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, []); return (
{ st.current.drag = { sx: e.clientX, x0: st.current.x }; e.currentTarget.setPointerCapture(e.pointerId); }} onPointerMove={(e) => { const d = st.current.drag; if (d) st.current.x = d.x0 + (e.clientX - d.sx); }} onPointerUp={() => { st.current.drag = null; }} onPointerCancel={() => { st.current.drag = null; }} onMouseEnter={() => { st.current.paused = true; }} onMouseLeave={() => { st.current.paused = false; }}>
{[...logos, ...logos].map((l, i) => ( {i= logos.length} draggable={false} style={{ height: Math.max(13, Math.round((l.h || 28) * 0.68)), width: 'auto', display: 'block', opacity: 0.6, flexShrink: 0, pointerEvents: 'none' }} /> ))}
); } /* One row per Services-page shape, same title and same gradient identity as the page it opens - a small round dot, not another square. */ function ShapeRow({ sec, last, onOpen }) { const [h, setH] = React.useState(false); const { Icon } = window.SevcikMarketingDesignSystem_3203fa; return (
setH(true)} onMouseLeave={() => setH(false)} role="link" tabIndex={0} style={{ display: 'flex', alignItems: 'center', gap: 13, margin: '0 -12px', padding: '13px 12px', borderRadius: 8, cursor: 'pointer', borderBottom: last ? 'none' : '1.5px solid var(--gray-200)', background: h ? 'var(--gray-150)' : 'transparent', transition: 'background-color .25s ease' }}>
{sec.title}
{(sec.rows || []).map((r) => r[0]).slice(0, 3).join(' · ')}
); } function PostMini({ post, last, onOpen }) { const [h, setH] = React.useState(false); return (
onOpen(post)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} role="link" tabIndex={0} style={{ margin: '0 -12px', padding: '12px', borderRadius: 8, cursor: 'pointer', borderBottom: last ? 'none' : '1.5px solid var(--gray-200)', background: h ? 'var(--gray-150)' : 'transparent', transition: 'background-color .25s ease' }}>
{post.date}{post.read ? ` · ${post.read}` : ''}

{post.title}

{post.category}
); } /* One quiet line when a sidebar section has nothing published yet - the panel keeps its shape and its 'see all' button still opens the full explanation. */ function SideEmpty({ text }) { return (

{text}

); } function Sidebar({ s, t, lang, screen, onNavigate, onLangChange, menuOpen, onOpenArticle, onOpenCase }) { const { ProfileHeader, ProjectCard, Button } = window.SevcikMarketingDesignSystem_3203fa; const footerMeta = { fontFamily: 'var(--font-meta)', fontWeight: 500, fontSize: 12.5, lineHeight: 1.2, color: 'var(--gray-500)', margin: 0 }; const footerMono = { fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 9.5, lineHeight: 1.45, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--gray-500)', margin: 0 }; const quietLink = { fontFamily: 'var(--font-meta)', fontWeight: 500, fontSize: 14.5, lineHeight: 1.5, color: 'var(--gray-600)', textDecoration: 'none' }; const shapes = s.servicesDetail.sections || []; return ( ); } Object.assign(window, { Sidebar });